export default {
  install (Vue) {
    //全局自定义指令
    Vue.directive('img', {
      inserted (el, binding) {
        // console.log(el, binding)
        // el.src = binding.value
        // 调用方法得到el,DOM节点元素是否在可视区域
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          // 回调是否处于可视区域,true在可视区域，false不在可视区域
          if (isIntersecting) {
            // 进入视口后，加载图片
            el.src = binding.value
            // 只需要监听一次即可，第二次滑动到可视区域是不在监听
            observer.unobserve(el)
          }
        })
        observer.observe(el)
        el.onerror = function () {
          // 设置默认图片
          el.src =
            'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
        }
      }
    })
  }
}
